嗨各位，今天是鐵人賽第九天，今天的天氣陰雨綿綿，很適合在家寫鐵人賽，小弟我今天要來介紹要如何用HTML製作製作表單，而一些屬性值會簡單帶過，還請各位多多包含，那我們不廢話直接開始。

<from>標籤

它是用來建立HTML表單的容器，且他有需多屬性我們一一介紹。

1.action:用於表單數據提交的目標URL，當使用者提交這表單會將數據送到該URL。

<form action="/submit-form.php">

2.method:用於指定數據提交的HTTP方式。常見的值有"get"和"post":

<form action="/submit-form.php" method="post">

• get:使用get時，表單會被加到action屬性所指定的URL尾端。如果表單不長可適用。

• post:使用post時，表單的值會由HTTP標頭傳送，如果是下列情況應該使用post:

  • 允許使用者上傳檔案
  • 表單很長
  • 有敏感資料(密碼)

3.name:用於為表單指定一個名稱，以便於在js中引用該表單。

<form name="registration-form">

4.traget:用於當數據提交的時候會在哪裡顯示回應的結果。常見的值有:"_self"(在當前視窗顯示)和 "_blank"(在新的視窗顯示)。

<form action="/submit-form.php" method="post" target="_blank">

5. autocomplete:指的是這表單是否啟用瀏覽器的自動完成功能，以填充表單字段。可以設置"on"(默認)或"off"。

<form action="/login.php" method="post" autocomplete="off">

常見的HTML表單標籤

常見的表單標籤有<input>、<textarea>、<select>、<button>和<lable>。

`'標籤

用於為表單提供標籤或說明文字。以下是範例:

<label for="input_id">標籤文字</label>
<input type="text" id="input_id" name="input_name">

在上面這個範例中，<lable>標籤使用for屬性來關聯到相應的輸入元素，這樣使用者點及標籤文本時，就會自動將焦點放在相關輸入的元素上。

當然也可以不使用for屬性來關聯標籤和輸入元素，可以將<lable>標籤包含在輸入標籤內部。這樣能可進行運作，但使用for和id的方法更具有可訪問性。

<label>標籤文字 <input type="text" name="input_name"></label>

<lable>標籤也常用於描述單選按鈕和複選框。

<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<label><input type="checkbox" name="subscribe" value="yes"> 訂閱電子報</label>

<lable>標籤可以提供更好的使用者體驗，是非常好用的標籤，各為在做表單的時候，可以多多使用這個標籤。

<input>輸入標籤

<input>標籤有多種不同的type屬性值，以下是他的介紹:

1.text:單行文本輸入框

<input type="text" name="username">

特點:允許使用者輸入純文本，用於一次性輸入少量數據，例如用戶名稱或電子郵件。

2.password:密碼輸入框

<input type="password" name="password">

用途:用於接收隱密訊息，例如密碼。通常顯示為星號或點點。

3.radio:單選按鈕

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

特點:具有相同的name屬性的單選按鈕選項將形成單選按鈕組。

4.checkbox複選框

<input type="checkbox" name="interest" value="music"> 音樂
<input type="checkbox" name="interest" value="sports"> 運動

特點:具有相同name屬性的複選框選項將形成複選框組。

5.file:文件上傳輸入框

<input type="file" name="file">

用途:用於文件上傳功能。

6.submit:提交按鈕

<form>
    <label for="username">用戶名稱：</label>
    <input type="text" id="username"             name="username"><br><br>

    <input type="submit" value="提交">
</form>

用途:當使用者單擊按鈕時，表單數據將提交到指定的action URL。

7.reset:重置按鈕

<form>
    <label for="username">用戶名稱：</label>
    <input type="text" id="username" name="username"><br><br>

    <input type="reset" value="重置">
</form>

用途:清除表單中所有輸入數據，重置為初始狀態。

8.button:自訂義按鈕

<input type="button" value="自定義按鈕">

用途：用於創建自定義按鈕，可以與JavaScript一起使用，執行特定的操作。

因為表單需要介紹的標籤有點多所以今天就介紹到這裡，那小弟我今天就在此告一段落，期待鐵人賽第10天相遇，那我們明天見吧。